<template>
  <div v-bind="$attrs" class="videoPlayer">
    <video class="video-js" :id="id" style="width: 100%; height: 100%" muted>
      <source v-if="src" :src="src" />
    </video>

  </div>
</template>
  
  <script setup lang="ts">
import { onMounted, onBeforeUnmount, watch, ref } from "vue";
import "video.js/dist/video-js.css";
import videojs from "video.js";

const overrideNative = ref(false);
const props = defineProps({
  id: { type: String, default: "vd" },
  src: { type: String, default: "" },
  poster: { type: String, default: "" },
});

const emit = defineEmits([
  "videoCanplaythrough",
  "videoPlay",
  "videoPlaying",
  "videoPause",
]);

// VideoJs更多选项配置可以参考中文文档：
// https://gitcode.gitcode.host/docs-cn/video.js-docs-cn/docs/guides/options.html
function options() {
  return {
    html5: {
      hls: {
        overrideNative: overrideNative,
      },
      nativeVideoTracks: !overrideNative,
      nativeAudioTracks: !overrideNative,
      nativeTextTracks: !overrideNative,
    },
    autoplay: true, // true,浏览器准备好时开始播放。
    muted: false, // 默认情况下将会消除音频。
    loop: false, // 导致视频一结束就重新开始。
    controls: true,
    preload: "auto", // auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
    fluid: true, // 当true时，将按比例缩放以适应其容器。
    type: "application/x-mpegURl",
    notSupportedMessage: "此视频暂无法播放，请稍后再试", // 无法播放媒体源时显示的默认信息。
    textTrackDisplay: false,
  };
}

let player: any;

onMounted(() => {
  try {
    player = videojs(props.id, options(), () => {
      console.log("播放器已经准备好了!");
      // player.play()
      player.on("canplaythrough", function (event: any) {
        emit("videoCanplaythrough", event.target.player.cache_?.duration);
      });
      player.on("play", function () {
        console.log("视频准备播放");

        emit("videoPlay");
      });
      player.on("playing", function () {
        console.log("视频已开始播放");
        emit("videoPlaying");
      });
      player.on("pause", function (event: any) {
        emit("videoPause", event.target.player.cache_?.currentTime);
      });
    });
  } catch (error) {
    console.log("catch--->", error);
  }
});

onBeforeUnmount(() => {
  if (player) {
    player.dispose();
  }
});

const bindClose = () => {
  player.on("pause", function (event: any) {});
  player.dispose();
};
</script>
  
  <style scoped>
.videoPlayer {
  width: 100%;
  height: 360px;
  position: relative;
  overflow: hidden;
}

.video-js {
  padding-top: 0 !important;
}
</style>
  
  